<template>
    <div class="popupsearchindexbar">
        <van-popup
            v-model:show="show"
            position="center"
            :style="{display:'flex', flexDirection: 'column',height: '100%', width: '100%'}">
            <form
                action="/"
                v-if="isSearchKeyboard">
                <van-search
                    v-model="searchValue"
                    left-icon=""
                    :placeholder="searchPlaceholder"
                    input-align="center"
                    @search="onSearch"
                />
            </form>
            <van-search
                v-else
                v-model="searchValue"
                left-icon=""
                :placeholder="searchPlaceholder"
                input-align="center"
            />
            <div class="content">
                <van-index-bar
                    highlight-color="#1890FF"
                    :index-list="indexList">
                    <template
                        v-for="index in indexList"
                        :key="index">
                        <van-index-anchor :index="index" />
                        <van-cell
                            v-for="_item in indexData[index]"
                            :key="_item.title"
                            :title="_item.title"
                            :clickable='true'
                            @click="selected(_item)"/>
                    </template>
                </van-index-bar>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { ref, watch } from 'vue';
import pinyin from 'js-pinyin';
import { selfI18n } from '@/i18n';
export default {
    name: 'PopupSearchIndexBar',
    props: {
        modelValue: Boolean,
        data: Array,
        displayField: String,
        isSearchKeyboard: {
            type: Boolean,
            default: false
        }
    },
    emits: ['update:modelValue', 'selectedItem', 'search'],
    setup (props, context) {
        const indexList = ref([]);
        const indexData = ref({});
        const searchValue = ref('');
        const show = ref(false);
        pinyin.setOptions({ checkPolyphone: false, charCase: 0 });
        const searchPlaceholder = ref('\ue6de ' + selfI18n('wp_Search'));
        watch(() => props.data,
            (newData, OldData) => {
                initData(newData);
            }, { deep: true });
        watch(() => props.modelValue,
            (newData, OldData) => {
                show.value = newData;
                if (!newData) {
                    searchValue.value = '';
                }
            });
        watch(searchValue, (newData, OldData) => {
            const searchData = props.data.filter(item => {
                if (typeof item === 'string') {
                    return item.includes(newData);
                } else {
                    return item[props.displayField].includes(newData);
                }
            });
            initData(searchData);
        });
        const selected = (item) => {
            context.emit('update:modelValue', false);
            context.emit('selectedItem', item.value);
        };
        const initData = (data) => {
            indexList.value = [];
            indexData.value = {};
            data.forEach(item => {
                let value = '';
                if (typeof item === 'string') {
                    value = item;
                } else {
                    value = item[props.displayField];
                }
                const first = pinyin.getCamelChars(value).substring(0, 1);
                if (!indexData.value[first]) {
                    indexData.value[first] = [];
                }
                indexData.value[first].push({ title: value, value: item });
            });
            indexList.value.push(...Object.keys(indexData.value).sort((a, b) => a.localeCompare(b)));
        };
        initData(props.data);

        const onSearch = (text) => {
            context.emit('search', text);
        };

        return {
            indexList,
            indexData,
            show,
            searchValue,
            selected,
            searchPlaceholder,
            onSearch
        };
    }
};
</script>
<style lang="scss">
.popupsearchindexbar{
    .content {
        flex: 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        .van-cell{
            font-size: 17px;
        }
    }
    .van-search{
        .van-field__control[type=search] {
            font-family: 'iconfont';
        }
    }
    .van-index-anchor{
        color: rgba($color: #000000, $alpha: 0.5);
    }
}
</style>
